<template>
	<a-modal
		:visible="props.visible"
		title="申请补款"
		:footer="null"
		:width="1300"
		@cancel="emits('update:visible', false)"
	>
		<!-- 基本信息 -->
		<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">基本信息</div>
		<div class="flex flex-wrap gap-4 my-6">
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">合同编号</span><span class="ml-3">{{ props.info.code || '-' }}</span>
			</div>
			<!--			<div class="w-[calc((100%-50px)/4)] truncate">-->
			<!--				<span class="text-gray-500">合同模板</span><span class="ml-3">{{ props.info.templateName || '-' }}</span>-->
			<!--			</div>-->
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">补款状态</span
				><span class="ml-3">{{ payStatusEnum[props.info.payStatus] || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">签约方式</span><span class="ml-3">{{ signMethodEnum[props.info.signMethod] }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">签约场景</span
				><span class="ml-3">{{ $TOOL.dictTypeData('SignPayment', props.info.signPayment) }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">合同总金额</span><span class="ml-3">{{ props.info.contractAmount || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">定金总金额</span><span class="ml-3">{{ props.info.depositAmount || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">尾款总金额</span><span class="ml-3">{{ props.info.balancePayment || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">尾款结算日期</span
				><span class="ml-3">{{ props.info.balancePaymentTime || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">甲方抬头</span
				><span class="ml-3" style="white-space: normal">{{ props.info.firstParty || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">乙方抬头</span
				><span class="ml-3" style="white-space: normal">{{ props.info.secondPartyName || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">合同创建人</span><span class="ml-3">{{ props.info.createUserName || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">创建时间</span><span class="ml-3">{{ props.info.createAt || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">签约日期</span><span class="ml-3">{{ props.info.signingDate || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/1.34)] truncate">
				<span class="text-gray-500">合同备注</span
				><span class="ml-3" style="white-space: normal">{{ props.info.remark || '-' }}</span>
			</div>
		</div>

		<!-- 订单信息 -->
		<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">补款信息</div>
		<a-form
			ref="formRef"
			:model="formData"
			name="basic"
			:label-col="{ span: 2 }"
			:wrapper-col="{ span: 22 }"
			autocomplete="off"
		>
			<a-table
				:columns="columns"
				:data-source="props.info.list"
				:scroll="{ x: 1200 }"
				:pagination="false"
				size="small"
				class="my-[20px]"
			>
				<template #bodyCell="{ column, index, record }">
					<template v-if="column.dataIndex === 'payPayment'">
						<a-tooltip>
							<template v-if="convertedStatus(record.orderStatus)" #title>该订单已转换</template>
							<a-input-number
								v-model:value="formData.payPaymentList[index]"
								:precision="2"
								:step="0.01"
								:min="0"
								:max="record.reduceBalancePayment"
								:disabled="convertedStatus(record.orderStatus)"
								class="w-[100px]"
							></a-input-number>
						</a-tooltip>
					</template>
				</template>
			</a-table>
			<div class="text-right">补款合计：{{ paySum }}</div>

			<a-form-item label="补款日期" name="payDate" :rules="[{ required: true, message: '请选择补款日期' }]">
				<a-date-picker v-model:value="formData.payDate" valueFormat="YYYY-MM-DD hh:mm:ss" class="w-[320px]" />
			</a-form-item>

			<a-form-item label="付款凭证" name="imgUrl" :rules="[{ required: true, message: '请上传付款凭证' }]">
				<xn-upload
					list-type="picture-card"
					:before-upload="beforeUpload"
					:uploadNumber="9"
					:multiple="true"
					accept="image/*,.pdf"
					@uploadDone="onUploadDone"
				/>
			</a-form-item>

			<a-form-item label="备注" name="remark">
				<a-textarea v-model:value="formData.remark" placeholder="请输入" :rows="4" />
			</a-form-item>
		</a-form>

		<!-- 通过驳回按钮 -->
		<div class="flex justify-center gap-6 pt-6">
			<a-button @click="emits('update:visible', false)">取消</a-button>
			<a-button type="primary" @click="submit">提交</a-button>
		</div>
	</a-modal>
</template>
<script setup>
	import contractPaymentApi from '@/api/biz/payment/bizContractPaymentApi'
	import { message, Upload } from 'ant-design-vue'
	import { payStatusEnum, signMethodEnum } from '../contractManagement/enum/contractEnum'
	import tool from '@/utils/tool'

	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object
		}
	})
	const emits = defineEmits(['update:visible', 'finished'])

	const convertedStatus = computed(() => (orderStatus) => orderStatus === 'CONVERTED')

	const columns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 190,
			fixed: 'left',
			customRender: ({ text }) => text || '-'
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 80,
			ellipsis: true,
			customRender: ({ text }) => tool.dictTypeData('BUSINESS_TYPE', text)
		},
		{
			title: '服务类型',
			dataIndex: 'serviceTypeName',
			width: 220,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${text} > ${record.serviceProjectName}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 80
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '剩余尾款金额',
			dataIndex: 'reduceBalancePayment',
			width: 110,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 120,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 120,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '补款金额',
			dataIndex: 'payPayment',
			width: 120,
			fixed: 'right'
		}
	]

	const formData = reactive({
		payPaymentList: [],
		payDate: null,
		imgUrl: [],
		remark: null
	})
	const paySum = computed(() =>
		formData.payPaymentList.reduce((total, item) => (item ? total + parseFloat(item) : total), 0).toFixed(2)
	)

	/**
	 * 资料上传
	 */
	const beforeUpload = (file) => {
		const isJpgOrPng =
			file.type === 'image/jpg' ||
			file.type === 'image/jpeg' ||
			file.type === 'image/png' ||
			file.type === 'application/pdf'
		if (!isJpgOrPng) {
			message.error('只能上传JPG/PNG/PDF格式的图片!')
		}
		const isLt10M = file.size / 1024 / 1024 < 10
		if (!isLt10M) {
			message.error('图片大小必须小于10MB!')
		}
		return (isJpgOrPng && isLt10M) || Upload.LIST_IGNORE
	}

	/**
	 * 上传付款凭证
	 */
	const onUploadDone = (result) => {
		formData.imgUrl = result.map((item) => item.url)
	}

	/**
	 * 通过
	 */
	const formRef = ref(null)
	const submit = () => {
		const { payPaymentList, payDate, imgUrl, remark } = formData
		const status = payPaymentList.every((item) => !item)
		if (status) {
			return message.warning('请至少输入一条补款金额')
		}

		formRef.value
			.validate()
			.then(() => {
				const { list, ...other } = props.info
				const finalList = list.reduce((total, item, index) => {
					const payPayment = payPaymentList[index]
					if (payPayment) {
						total.push({
							...item,
							payPayment
						})
					}
					return total
				}, [])
				const params = {
					...other,
					list: finalList,
					payDate,
					imgUrl: imgUrl.join(','),
					remark,
					contractPaymentId: other.id,
					contractCode: other.code
				}
				contractPaymentApi.apply(params).then(() => {
					emits('update:visible', false)
					emits('finished')
				})
			})
			.catch((error) => {
				console.log('error', error)
			})
	}
</script>
<style lang="less" scoped>
	:deep(.ant-input-number-handler-wrap) {
		display: none;
	}
</style>
